const data = {
	inputValue: ""
}

function definePropertyDemo() {
	const vModal = (element, state, dataKey) => {
		let value = "";
		Object.defineProperty(state, dataKey, {
			set (v) {
				value = v;
				element.value = v;
				return true;
			},
			get () {
				return value;
			}
		});
		element.addEventListener("input", (e) => {
			state[dataKey] = e.target.value;
		})
	}
	const input = document.querySelector("#username");
	vModal(input, data, "inputValue");
}
function proxyDemo() {
	const vModal = (element, state, dataKey) => {
		const proxy = new Proxy(state, {
			// get (target, p, receiver) {
			// 	if (p === dataKey) {
			//		
			// 	}
			// 	return true;
			// },
			set (target, p, newValue, receiver) {
				if (p === dataKey) {
					console.log("设置", p, "的值为", newValue);
					target[p] = newValue;
					// Reflect.set(...arguments);
					element.value = newValue;
				}
				return true;
			}
		});
		element.addEventListener("input", (e) => {
			proxy[dataKey] = e.target.value;
		})
		window.data = proxy;
	}
	const input = document.querySelector("#username");
	vModal(input, data, "inputValue");
}
window.onload = () => {
	// definePropertyDemo();
	proxyDemo();
}